<template>
	<view class="content">
		<view
			v-for="(item, index) in data"
			:key="index"
			style="margin-bottom: 20rpx;"
		>
			<view class="list" @click="details(item.id, item.is_enroll)">
				<view class="info">
					<text class="text">{{ item.post_title }}</text>
					<text class="text1">
						{{ item.is_enroll === 1 ? '已报名' : '未报名' }}
					</text>
				</view>
				<text class="text11">{{ item.post_source }}</text>
				<view class="info1 u-line-1">{{ item.post_excerpt }}</view>
				<view
					v-if="item.thumbnail"
					class="image"
					:style="[
						{
							background: `url(${
								item.thumbnail
							}) no-repeat center`
						},
						{ backgroundSize: 'cover' }
					]"
				></view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			page: 1, //页码
			pagesize: 10, //每页展示条数
			data: []
		};
	},
	methods: {
		//首页培训列表
		async getTrnLst() {
			const res = await this.$u.post(
				'/api/Allnews/train_list',
				{
					page: this.page,
					pagesize: this.pagesize
				},

				{
					'XX-Token': uni.getStorageSync('token'),
					'XX-Device-Type': 'wxapp'
				}
			);

			this.data = res.data;
			console.log('this.data  >>  ', this.data);
		},
		details(id, gray) {
			var obj = {
				id: id,
				gray: gray
			};
			uni.navigateTo({
				url: './xiangqing/xiangqing?obj=' + JSON.stringify(obj)
			});
		}
	},
	onLoad() {
		try {
			const token = uni.getStorageSync('token');

			if (token) {
				console.log('token :>> ', token);
				//this.token = token;
				this.getTrnLst();
			} else {
				uni.reLaunch({
					url: '../login/login',
				});
			}
		} catch (e) {}
	}
};
</script>

<style lang="scss">
.content {
	background-color: #f8f8f8;
	padding: 30rpx;
	height: 100vh;
	.list {
		display: flex;
		flex-direction: column;

		padding: 30rpx 22rpx;
		width: 690rpx;
		//height: 532rpx;
		background: #ffffff;
		border-radius: 20rpx;
		.info {
			display: flex;
			justify-content: space-between;
			.text {
				height: 30rpx;
				line-height: 30rpx;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #1a1a1a;
				line-height: 40rpx;
			}
			.text1 {
				width: 101rpx;
				height: 30rpx;
				background: #fdebe0;
				text-align: center;
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #5a1524;
				line-height: 30rpx;
				margin-right: -22rpx;
			}
		}
		.text11 {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #999999;
			line-height: 27rpx;
			margin-top: 24rpx;
			margin-bottom: 12rpx;
		}
		.info1 {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 30rpx;
		}
		.image {
			width: 650rpx;
			height: 300rpx;
			border-radius: 20rpx;
			margin-top: 19rpx;
			image {
				width: 100%;
				height: 100%;
				border-radius: 20rpx;
			}
		}
	}
}
</style>
